import React from "react";
import { HotTheat } from "@/components/main/index/styled";
import { connect } from "react-redux";
import { loadGetHotTheatreDataAsync } from "@/components/main/index/actionCreator";
import Swiper from "@/components/common/swiper.jsx";

class HotTheater extends React.Component {
  constructor() {
    super();
    this.state = {
      hotthealist: []
    };
  }
  render() {
    if (this.state.hotthealist.length !== 0) {
      return (
        <HotTheat>
          <h1>热门场馆</h1>
          <Swiper
            id={"hotthealist"}
            config={{
              slidesPerView: 1.2,
              spaceBetween: 30
            }}
          >
            {this.state.hotthealist.map((item, index) => (
              <div className="swiper-slide" key={index}>
                <div className="hotthea_list">
                  <div className="hotthea_list_top">
                    <div className="hotthea_pic">
                      <img src={item.pic} alt="" />
                    </div>
                    <i>{item.name}</i>
                    <p>{item.count}场在售演出</p>
                    <span>...</span>
                  </div>
                  {item.showList.map((valeu, inde) => (
                    <div className="hotthea_show" key={inde}>
                      <div className="hotthea_time">
                        <span>{valeu.show_time}</span>
                        <i></i>
                      </div>
                      <img src={valeu.pic} alt="" />
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </Swiper>
        </HotTheat>
      );
    } else {
      return null;
    }
  }
  componentDidMount() {
    loadGetHotTheatreDataAsync(res => {
      var data = res.val.theatre_list;
      var hotthealist = [];
      for (var n in data) {
        hotthealist.push(data[n]);
      }
      this.setState({ hotthealist });
    });
  }
}
const mapStateToProps = state => {
  return {};
};
const mapDispatchToProps = dispatch => {
  return {};
};
export default connect(mapStateToProps, mapDispatchToProps)(HotTheater);
